<script setup lang="ts">
import type { Game } from './types'

const router = useRouter()

// 定义游戏列表数据
const games = ref<Game[]>([
  { key: '2048', icon: '&#xe620;', label: '2048' },
  { key: 'ticTacToe', icon: '&#xe61a;', label: '井字棋' },
  { key: 'tetris', icon: '&#xec09;', label: '俄罗斯方块' },
  { key: 'snake', icon: '&#xe6e6;', label: '贪吃蛇' },
])

function handleGoGame(key: string) {
  switch (key) {
    case '2048':
      router.push('/2048')
      break
    case 'ticTacToe':
      router.push('/ticTacToe')
      break
    case 'tetris':
      router.push('/tetris')
      break
    case 'snake':
      router.push('/snake')
      break
    default:
      router.push('/')
  }
}
</script>

<template>
  <div class="home-page">
    <h1 class="flx-center">
      阿叨游戏合集
    </h1>
    <el-row :gutter="20">
      <el-col
        v-for="game in games"
        :key="game.key"
        :span="12"
      >
        <el-card style="min-height: 100px" @click="handleGoGame(game.key)">
          <div class="content">
            <i class="iconfont" v-html="game.icon" />
            <p class="desc">
              {{ game.label }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="flx-center bottom-desc">
      持续更新中……
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-row) {
  margin-top: 12px;
  padding: 0 12px;
  .el-col {
    margin-bottom: 12px;
  }
}
:deep(.el-card) {
  cursor: pointer;
}
.home-page {
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i {
      font-size: 50px;
    }
    .desc {
      margin-top: 10px;
    }
  }
}
</style>
